<template>
  <div class="detail-box">
    <div class="detail-header-box">
      <div class="detail-header-left">
        <div class="title-box">
          <p>三拼超市大观园店（百伦）</p>
          <p>山东省滨州市惠民县孙武街道南门大街59号大观园商城(南门大街店)</p>
        </div>
        <div class="cards-box">
          <card title="总订单量" :num="1451" unit="单" />
          <card title="总营业额" :num="25745.14" unit="元" :decimals="true" />
        </div>
        <div class="detail-header-back">
          <a-button type="primary" icon="rollback" @click="handleBack">
            返回
          </a-button>
        </div>
      </div>
    </div>
    <div class="detail-content">
      <cash-card
        v-for="(item, index) in card"
        :key="index"
        :cashier="item.cashier"
        :order="item.order"
        :cash="item.cash"
      />
    </div>
  </div>
</template>

<script>
import cashCard from "@/components/cashCard";
import card from "@/components/card";
export default {
  components: {
    cashCard,
    card,
  },
  data() {
    return {
      card: [
        {
          cashier: "1号收银机",
          order: 305,
          cash: 2682.14,
        },
        {
          cashier: "1号收银机",
          order: 305,
          cash: 2682.14,
        },
        {
          cashier: "1号收银机",
          order: 305,
          cash: 2682.14,
        },
        {
          cashier: "1号收银机",
          order: 305,
          cash: 2682.14,
        },
        {
          cashier: "1号收银机",
          order: 305,
          cash: 2682.14,
        },
      ],
      data: {},
    };
  },
  created() {
    let info = this.$route.query.site;
    // console.log(info)
    // console.log(JSON.parse(decodeURIComponent(info)))
    this.data = JSON.parse(decodeURIComponent(info));
  },
  methods: {
    handleBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.detail-box {
  .detail-header-box {
    position: relative;
    display: flex;
    justify-content: space-between;
    .detail-header-back {
      width: auto;
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .detail-header-left {
    display: inline-block;
    flex: 1;
    & > .title-box {
      vertical-align: top;
      background: #e2eaff;
      border-radius: 10px;
      display: inline-block;
      margin-right: 20px;
      margin-bottom: 20px;
    }
    & > .title-box:nth-child(1) {
      width: 35%;
      min-width: 450px;
      height: 80px;
      padding: 15px;
      position: relative;
      & > p {
        margin: 0;
      }
      & > p:nth-child(1) {
        font-size: 16px;
        font-family: "Source Han Sans CN";
        font-weight: 400;
        color: #303133;
      }
      & > p:nth-child(2) {
        font-size: 14px;
        font-family: "Source Han Sans CN";
        font-weight: 400;
        color: #606266;
        position: absolute;
        bottom: 15px;
      }
    }
    .cards-box {
      display: inline-block;
    }
  }
  .detail-content {
    margin-top: 15px;
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 1050px) {
  .title-box {
    width: 100% !important;
  }
  .cards-box {
    width: 100%;
  }
}
@media screen and (min-width: 1000px) and (max-width: 1460px) {
  .title-box {
    width: 100% !important;
  }
  .cards-box {
    width: calc(100% + 20px);
  }
}
</style>
